<template>

  <div class="detail_page">
    <div class="content">
      <div class="head_box">
        <div v-if="feedback.status != 3" class="btn_list">
          <el-button type="primary" @click="handle">回复</el-button>
        </div>
        <div class="btn_list">
          <el-button @click="back">返回</el-button>
        </div>
      </div>
      <div class="detail">
        <div class="order_info">
          <p class="detail_title">反馈信息</p>
          <ul class="order_list">
            <li>
              <p>用户 ：</p>
              <p class="active">
                <span>{{ feedback.name }}</span>
                <!--                <span v-if="item.type ===3" class="active" @click="getInfo(item)">查看物流</span>-->
              </p>
            </li>
            <li>
              <p>手机号 ：</p>
              <p class="active">
                <span>{{ feedback.tel }}</span>
                <!--                <span v-if="item.type ===3" class="active" @click="getInfo(item)">查看物流</span>-->
              </p>
            </li>
            <li>
              <p>反馈时间 ：</p>
              <p class="active">
                <span>{{ feedback.createAt }}</span>
                <!--                <span v-if="item.type ===3" class="active" @click="getInfo(item)">查看物流</span>-->
              </p>
            </li>
            <li>
              <p>反馈类型 ：</p>
              <p class="active">
                <span>{{ feedback.typeStr }}</span>
                <!--                <span v-if="item.type ===3" class="active" @click="getInfo(item)">查看物流</span>-->
              </p>
            </li>

          </ul>
          <ul class="order_list2">
            <li>
              <p>反馈内容 ：</p>
                <p class="active">
                  <span>{{ feedback.content }}</span>
                <!--                <span v-if="item.type ===3" class="active" @click="getInfo(item)">查看物流</span>-->
                </p>
            </li>
          </ul>
          <ul v-if="urls" class="order_list2">
            <li>
              <p>详情图:</p>
              <div class="demo-image__lazy">
                <el-image v-for="url in urls" :key="url" :src="url" lazy @click="handlePictureCardPreview(url)" />
              </div>
            </li>
          </ul>
        </div>

      </div>

    </div>
    <el-dialog
      :visible.sync="isVisible"
      title="反馈回复"
      :close-on-click-modal="false"
    >
      <el-form
        ref="replyForm"
        :model="form"
        :rules="rules"
        label-width="80px"
      >
        <el-form-item label="回复" prop="reply">
          <el-input v-model="form.reply" maxlength="500" rows="5" type="textarea" placeholder="请回复用户反馈" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </span>
    </el-dialog>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>

  </div>
</template>

<script>
import { getById, reply } from '@/api/feedback'
import { formatTime } from '@/api/formatDate'

export default {
  data() {
    return {
      urls: null,
      feedback: {
        name: '',
        tel: '',
        content: '',
        createAt: ''
      },
      form: {
        reply: ''
      },
      isVisible: false,
      rules: {
        reply: [
          { required: true, message: '请输入回复内容', trigger: 'blur' }
        ]
      },
      dialogImageUrl: '',
      dialogVisible: false
    }
  },
  computed: {
    id() {
      return this.$route.query.id
    }
  },
  created() {
    this.getInfo(this.$route.query.id)
  },
  methods: {
    async getInfo(id) {
      const res = await getById(id)
      this.feedback = res.data
      console.log(this.feedback)

      const date = new Date(this.feedback.createAt)
      this.feedback.createAt = formatTime(date, 'yyyy-MM-dd hh:mm')
      const type = res.data.type
      var typeStr = ''
      if (type === 1) {
        typeStr = '发货、物流、发票及安装问题'
      } else if (type === 2) {
        typeStr = '退换货、维修、漏发问题'
      } else if (type === 3) {
        typeStr = '商品使用与质量'
      } else if (type === 4) {
        typeStr = '投诉与建议'
      } else if (type === 5) {
        typeStr = 'APP使用体验问题与建议'
      }
      this.form.reply = this.feedback.reply
      this.feedback.typeStr = typeStr
      const imgs = res.data.imgs
      if (imgs.length > 0) {
        this.urls = imgs.split(',')
      }
    },
    handlePictureCardPreview(url) {
      this.dialogImageUrl = url
      console.log(url)
      this.dialogVisible = true
    },
    handle() {
      this.isVisible = true
    },
    cancel() {
      this.isVisible = false
    },
    back() {
      this.$router.go(-1)
    },
    confirm() {
      this.$refs.replyForm.validate((valid) => {
        if (valid) {
          this.form.id = this.$route.query.id
          console.log(this.form)
          reply(this.form).then((res) => {
            if (res.code === '200') {
              this.$message({
                message: '回复成功',
                type: 'success'
              })
              this.isVisible = false
              this.$router.go(-1)
            }
          })
        }
      })
    }
  }
}
</script>
<style lang='less' scoped>
.detail_page {
  margin-top: 10px;
  background-color: #fff;
  height: calc(100% - 10px);
  .content {
    padding: 20px;
    .head_box {
      overflow: hidden;
      height: 80px;
      line-height: 80px;
      font-size: 24px;
      border-bottom: 1px solid #e0e5eb;
      .btn_list {
        display: inline-block;
        float: right;
      }
    }
    .detail,
    .after_sales_record {
      min-height: 500px;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 0px 10px 0px rgba(51, 51, 51, 0.15);
      border-radius: 4px;
      padding: 1px 10% 20px;
      margin-top: 15px;

      .detail_title {
        font-size: 24px;
        color: #333333;
        position: relative;
        margin: 50px 20px 20px;
        &:before {
          content: "";
          display: block;
          position: absolute;
          top: 5px;
          left: -20px;
          width: 4px;
          height: 24px;
          background-color: #3a68f2;
        }
      }
    }

    .order_info {
      .order_list {
        padding-left: 20px;
        overflow: hidden;
        list-style: none;
        li {
          float: left;
          width: calc(100% / 3);
          margin-bottom: 30px;
          p {
            margin: 0;
            padding: 0;
            display: inline-block;
            font-size: 16px;
            color: #333333;
            &:nth-child(1) {
              width: 23%;
            }
            &:nth-child(2) {
              color: #666666;
            }
          }
        }
        .active {
          color: #3a68f2 !important;
          &:hover {
            cursor: pointer;
          }
        }
      }

      .order_list2 {
        padding-left: 20px;
        overflow: hidden;
        list-style: none;
        li {
          float: left;
          width: 100%;
          margin-bottom: 30px;
          p {
            margin: 0;
            padding: 0;
            display: inline-block;
            font-size: 16px;
            color: #333333;
            &:nth-child(1) {
              width: 23%;
            }
            &:nth-child(2) {
              color: #666666;
            }
          }
        }
        .active {
          color: #3a68f2 !important;
          &:hover {
            cursor: pointer;
          }
        }
      }
    }

    .after_sale_shop {
      .goods_list {
        padding-left: 20px;
        .good_details {
          border-bottom: 1px #e0e5eb solid;
          ul {
            overflow: hidden;
            display: flex;
            margin: 0;
            padding: 30px 0;
            font-size: 16px;
            li {
              flex: 3;
              display: flex;
              // justify-content: center;
              // align-items: center;
              text-align: left;
              img {
                width: 90px;
                height: 90px;
                border-radius: 4px;
                font-size: 16px;
                color: #333333;
              }
              &:nth-child(2),
              &:nth-child(3) {
                display: block;
              }
              &:nth-child(3) {
                p {
                }
              }
              &:nth-child(4) {
              }
              p {
                margin: 0;
                padding: 0;
                height: 30px;
                line-height: 30px;
              }
            }
          }
        }
      }
      .total {
        padding-left: 20px;
        ul {
          margin: 0;
          padding: 30px 0;
          display: flex;
          justify-content: flex-end;

          li {
            // height: 40px;
            font-size: 16px;
            color: #333333;
            display: flex;
            width: 90px;
            // justify-content: center;
            // align-items: center;
            &:nth-child(4) {
              margin-right: 140px;
            }
          }
        }
      }
    }

    .after_sales_record {
      p {
        margin: 0;
        padding: 0;
        font-size: 16px;
      }
      .record_list {
        padding-left: 20px;
        .record_list_title {
          background: #f7f7f7;
          overflow: hidden;
          margin-bottom: 30px;
          p {
            float: left;
            text-indent: 10px;
            width: calc(100% / 3);
            height: 36px;
            line-height: 36px;
          }
        }
        .record_list_content {
          p {
            overflow: hidden;
            margin-bottom: 30px;
            span {
              display: block;
              float: left;
              // width: 100px;
              &:nth-of-type(2) {
                text-indent: 10px;
              }
              &:nth-of-type(2) {
                color: #666666;
                width: calc(100% - 100px);
              }
            }
            img {
              width: 90px;
              height: 90px;
              border-radius: 4px;
            }
          }
        }
      }
    }
  }
}

::v-deep .el-dialog__wrapper {
  .el-dialog__header {
    height: 70px;
    background-color: #3a68f2;
    .el-dialog__title {
      font-size: 24px;
      color: #fff;
    }
  }
}
</style>
<style lang="scss" scoped>
@import url("../../styles/elDialog.scss");
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.order_details {
  h3 {
    // margin-left: 20px;
    margin: 20px 0 20px 20px;
    font-weight: 700;
  }
  .close {
    // float: right;
    position: absolute;
    right: 20px;
    &:hover {
      cursor: pointer;
    }
  }

  .cotent {
    margin: 20px;
    overflow: hidden;
    font-size: 14px;
    .goods_info,
    .order_info,
    .logistics_info,
    .pay_order_info,
    .take_goods_info {
      background: #fff;
      margin-bottom: 10px;
      padding: 10px 20px;
    }
    .pay_order_info,
    .take_goods_info{
      p{
         line-height: 30px;
      }
    }
    h2 {
      margin: 0;
      font-weight: 400;
      height: 40px;
      line-height: 40px;
      font-size: 18px;
      text-align: -10px;
    }
    .left_part {
      float: left;
      width: calc(70% - 10px);
      margin-right: 10px;
      .order_info {
        box-sizing: border-box;
        ul {
          padding: 10px 30px;
          li {
            overflow: hidden;
            p {
              width: 50%;
              float: left;
              font-size: 14px;
              line-height: 30px;
              span {
                &:nth-child(2) {
                  margin-left: 10px;
                }
              }
            }
          }
        }
        .remarks {
          margin-left: 30px !important;
        }
      }
      .goods_info {
        .goods_list {
          padding: 15px;
          .good_price {
            ul {
              li {
                &:nth-child(1) {
                  p {
                    width: 50%;
                    float: left;
                  }
                }
                p {
                  line-height: 30px;
                }
              }
            }
            border-bottom: 1px gray solid;
          }
          .good_details {
            ul {
              display: flex;
              margin-top:20px;
              li {
                flex: 3;
                display: flex;
                justify-content: space-around;
                align-items: center;
                .details {
                  margin: 0 30px;
                  width: 180px;
                  line-height: 20px;
                  .skuDetails {
                    margin-top: 8px;
                    margin-bottom: 8px;
                    margin-right: 10px;
                    line-height: 1;
                    color: #9e9e9e;
                    .detail_span {
                      margin-right: 8px;
                    }
                  }
                }
                img {
                  width: 50px;
                  height: 50px;
                }
              }
            }
          }
        }
      }
      .logistics_info {
        .send_good {
          display: block;
          margin: 20px auto !important;
          &:hover {
            cursor: pointer;
          }
        }
        .logistics_content {
          padding: 0 10%;
          .logistics_title {
            span {
              margin: 20px 0;
              display: inline-block;
              width: 45%;
            }
          }
          .logistics_item {
            span {
              display: inline-block;
              width: 30%;
            }
          }
        }
      }
    }

    .right_part {
      float: left;
      width: 30%;
    }
  }
}
</style>
